<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@ include file="../common/baseCss.jsp"%>
<title>验证登陆</title>
<style type="text/css">
.block {
	display: flex;
	line-height: 2.5rem;
	margin-top: 1.25rem;
}

.msgicon {
	background-image: url(../../../images/message.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	width: 0.94rem;
	height: 0.94rem;
	display: inline-block;
	margin-right: 0.16rem;
	top: 0.19rem;
	position: relative;
}

.block .msg {
	position: absolute;
	bottom: 0rem;
	left: 22rem;
	/* color: #Ea9792; */
	color: #C41305;
	font-size: 0.81rem;
	display: none;
}

.block .msg1 {
	display: block;
	position: absolute;
	bottom: 0rem;
	left: 22rem;
	/* color: #Ea9792; */
	font-size: 0.81rem;
	
}

.info {
	flex: 0 0 9rem;
	width: 9rem;
	height: 2.5rem;
	line-height: 2.5rem;
	color: rgb(13, 13, 13);
	text-align: right
}

.Email {
	margin-left: 11.5rem;
	color: #0076ff;
	font-size: 14px;
}

.info .red {
	color: rgb(13, 13, 13);
}

.search_box {
	position: relative;
	flex: 1;
	padding-left: 2rem;
}

.search_box .input {
	margin: 0;
	padding: 0;
	width: 18rem;
	height: 2.5rem;
	line-height: 2.5 rem;
	padding-left: 0.7rem;
	border: 1px solid #ddd;
}

#sendCode,#nextPhone,#picCode {
	width: 6.5rem;
	height: 2.5rem;
	font-family: PingFangSC-Regular;
	font-size: 1rem;
	color: #FFFFFF;
	/* background-color: #Ea9792; */
	background-color: #bbbbbb;
	border: none;
	border-radius: 0.3125rem;
	cursor: default;
}

#picCode {
	float: left;
}

#nextPhone {
	margin-left: 1.1rem;
	background-color:#B62D33;
	cursor: pointer;
}

#mobileNextPhone {
	display: none;
}

#vertical_line {
	display: none;
}

#get_code {
	display: none;
}

.commitBtn {
	margin-left: 11rem;
	width: 18rem;
	height: 4rem;
	line-height: 4rem;
	margin-top:2rem;
}

.commitBtn input[type=button] {
	margin: 0 auto;
	width: 7rem;
	height: 2.5rem;
	color: white;
	/* background: rgb(197, 24, 10); */
	background: #bbbbbb;
	border-radius: 0.3rem;
	border: none;
	cursor: default;   
	 font-size: 1rem;
}
</style>
</head>
<body>
<!-- <nav class="breadcrumb">
	<i class="Hui-iconfont">&#xe67f;</i> 首页 
	<span class="c-gray en">&gt;</span> 敏感操作验证 
</nav> -->

	<div class="page-container">
			<div id="contentInfo" style="display:none;">
				<form id="aopLoginForm" method="post">
					<div class='block'> 
						<div class="info" id="pWord">当前手机号</div>
						<div class="search_box">
							<input class="input" type="text" maxlength="11" name="phone" id="phone" readonly>
						</div>
					</div> 
					
					<div class='block'> 
						<div class="info">图片验证码</div>
						<div class="search_box">
							<input class="input" type="text" maxlength="4" name="checkcode" id="checkcode" placeholder="输入图片验证码">
							<div class='msg1'>
								<img id="picCode"/>
								<div id="mobileNextPhone">换一张</div>
								<input type="button" id="nextPhone" value="换一张">
							</div>								
						</div>
					</div> 
					
					<div class='block'>
						<div class="info" id="cWord">手机验证码</div>
						<div class="search_box">
							<input class='input' type="text" name="code" id="code" maxlength="4" placeholder="输入验证码">
							<div class=' msg1'>
								<div id="vertical_line">|</div>
								<div id="get_code">获取验证码</div>
								<input type="button" disabled="disabled" id="sendCode" value="获取验证码">
							</div>
						</div>
					 </div>
					<div class="commitBtn">
						<input type="button" disabled="disabled" id="aopLogin" value="登录验证">
					</div>
				</form>
				
				<div style="margin: auto 11rem;">
				提示：敏感操作需要管理员手机号登录验证！<br>
				有效期： <span style="color:red;">60</span>分钟
				</div>
			</div>
	</div>
	
</body>
<%@ include file="../common/baseJs.jsp"%>
 <script type="text/javascript" src="manager/js/aopLogin/aopLogin.js"></script>
</html>